@extends('admin.basev2')

@section('content')
    <style>
        .layui-card-header .layui-icon {
            margin-top: -39px;
            margin-right: 24px;
            font-size: 22px;
            background-color: #fff;
            color: #1a2226;
        }
        .layui-form-label {
            padding: 9px 0px;
            width: 42px;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <i class="layui-icon layui-tab-close layui-btn" id="btnCancel">ဆ</i>
            <div class="layui-form">
                <div class="layui-form-item" style="display: contents">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期：</label>
                        <div class="layui-inline" id="test-range">
                            <div class="layui-input-inline">
                                <input type="text" id="startDate" class="layui-input" placeholder="开始日期">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" id="endDate" class="layui-input" placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                </div>
                <button class="layui-btn" id="searchBtn">搜 索</button>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('company.companyCoupon.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                    @endcan
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
        <script>
            layui.use(['layer', 'table', 'laydate'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var table = layui.table;
                var laydate = layui.laydate;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , autoSort: false
                    , height: "auto"
                    , url: "{{ route('admin.renter.weData',['renter_id' => $renter_id])}}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {field: 'id', title: '编号', width: 80, align: 'center'}
                        , {field: 'ym', title: '日期', align: 'center'}
                        , {field: 'renter_fee', title: '场租', align: 'center'}
                        , {field: 'property_fee', title: '物业', align: 'center'}
                        , {field: 'water_fee', title: '水费', align: 'center'}
                        , {field: 'electric_fee', title: '电费', align: 'center'}
                        , {field: 'public_relations_fee', title: '公关费', align: 'center'}
                        , {field: 'remarks', title: '备注', width: 220, align: 'center'}
                        , {field: 'created_at', title: '创建时间', width: 220, align: 'center'}
                        , {fixed: 'right', title: '管理', width: 150, align: 'center', toolbar: '#options'}
                    ]]
                });
                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var datac = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'edit') {
                        layer.open({
                            type: 2,
                            title: '编辑月度费用',
                            fixed: false,
                            area: ['30%', '700px'],
                            btn: ['确定'],
                            content: '/admin/renter/weHtml?id=' + datac.id,
                            success:function (layero) { //成功弹窗执行
                                layero.find('.layui-layer-btn').css('text-align', 'center')
                            },
                            yes:function (index, layero) { //点击btn执行
                                var body = layer.getChildFrame('body',index);
                                var data = body.find('.layui-input').serializeArray(); //拿到弹窗的值
                                var formData = {};
                                for(var i = 0; i < data.length; i++){
                                    formData[data[i].name] = data[i].value
                                }
                                if(!formData.images_url){
                                    layer.alert('请上传凭证', {icon: 2});return false;
                                }
                                //发送表单数据到服务器
                                layui.$.ajax({
                                    url: '/admin/renter/weStore?id=' + datac.id,
                                    type: 'POST',
                                    data: formData,
                                    success: function (res) {
                                        if (res.code == 0) {
                                            layer.msg(
                                                res.msg, {icon: 1, time: 1000},
                                                function () {
                                                    location.href = '/admin/renter/weList?renter_id=' + datac.renter_id;
                                                },
                                                layer.close(index)
                                            )
                                        } else {
                                            layer.msg(
                                                res.msg, {icon: 5},
                                            )
                                        }
                                    }
                                })
                            }
                        });
                    }
                });

                //点击事件
                $("#btnCancel").click(function () {
                    window.history.back();
                })

                //搜索
                $("#searchBtn").click(function () {
                    let start_time = $("#startDate").val();
                    let end_time = $("#endDate").val();
                    dataTable.reload({
                        where: {start_time: start_time, end_time: end_time},
                        page: {curr: 1}
                    })
                });

                //日期插件
                laydate.render({
                    elem: '#startDate' //指定元素
                });
                laydate.render({
                    elem: '#endDate' //指定元素
                });
            })
        </script>
@endsection
